<template>
  <div>
    <el-dialog
      :title="title"
      :width="dialogWidth"
      :visible.sync="detailsVisible"
      v-dialogDrag
      :append-to-body="true"
    >
      <div class="detail">
        <ul
          class="item"
          v-for="(item,index) in detailsData"
          :key="index"
          :class="{wholeLine: item.wholeLine}"
          :style="{width: item.itemdWidth ? item.itemdWidth :'820px'}"
        >
          <li
            class="field"
            :title="item.field"
            :style="{width: item.filedWidth ? item.filedWidth :'152px'}"
          >
            {{ item.field }}：
          </li>
          <li
            class="value"
            :style="{width: item.valueWidth ? item.valueWidth :'180px'}"
          >
            {{ item.value }}
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "detail",
  data: function () {
    return {
      detailsVisible: false,
    };
  },
  props: {
    detailsData: {
      type: Array,
      default: [],
    },
    title: {
      type: String,
      default: "详情",
    },
    dialogWidth: {
      type: String,
      default: "860px",
    },
  },
  methods: {
    close: function () {
      this.switchDialog(false);
    },
    switchDialog: function (bol) {
      this.detailsVisible = bol;
    },
  },
};
</script>
<style scoped>
.detail {
  overflow: hidden;
  padding-bottom: 30px;
}
.detail .wholeLine {
  width: 100%;
  overflow: hidden;
}
.detail .item {
  float: left;
  font-size: 1.5rem;
  line-height: 36px;
}
.detail .item .field {
  text-align: right;
  font-weight: bold;
  float: left;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.detail .item .value {
  text-align: left;
  float: left;
}
</style>